Skip to content

feat(editor): tint tab bar with active connection color#333

Merged
debba merged 7 commits into
TabularisDB:mainfrom
Davydhh:feat/connection-color-tab-bar
Jun 24, 2026
Merged

feat(editor): tint tab bar with active connection color#333
debba merged 7 commits into
TabularisDB:mainfrom
Davydhh:feat/connection-color-tab-bar

Conversation

@Davydhh

@Davydhh Davydhh commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

Closes #330

Applies the connection's accent color as a subtle tint on the editor tab bar, for at-a-glance connection identity.

@kilo-code-bot

kilo-code-bot Bot commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

Code Review Summary

Status: No Issues Found | Recommendation: Merge

Files Reviewed (2 files)
  • src/components/layout/ExplorerSidebar.tsx - Applied connection accent color to split-view connection switcher buttons; inactive items use a dimmer alpha wash.
  • src/components/layout/SplitPaneLayout.tsx - Applied connection accent color to split-pane panel headers; active panel rendered more strongly.
Previous Review Summaries (3 snapshots, latest commit 0614881)

Current summary above is authoritative. Previous snapshots are kept for context only.

Previous review (commit 0614881)

Status: No Issues Found | Recommendation: Merge

Files Reviewed (10 files)
  • README.md - Added Flatpak installation instructions and Vercel OSS badge
  • README.de.md - Added Flatpak installation instructions
  • README.es.md - Added Flatpak installation instructions
  • README.fr.md - Added Flatpak installation instructions
  • README.it.md - Added Flatpak installation instructions
  • README.ja.md - Added Flatpak installation instructions
  • README.ru.md - Added Flatpak installation instructions
  • README.zh-CN.md - Added Flatpak installation instructions
  • src-tauri/src/plugins/driver.rs - Added trigger RPC methods (get_triggers, get_trigger_definition, create_trigger, drop_trigger) with comprehensive tests. Clean, consistent implementation following existing patterns.
  • src/pages/Editor.tsx - Refined tab bar accent color styling with adjusted gradient/transparency alpha values (e.g., 3830, 1420, 6650, b3cc, 59 for boxShadow). Purely visual polish, no logic changes.

Previous review (commit a463e7b)

Status: No Issues Found | Recommendation: Merge

Files Reviewed (10 files)
  • README.md - Added Flatpak installation instructions and Vercel OSS badge
  • README.de.md - Added Flatpak installation instructions
  • README.es.md - Added Flatpak installation instructions
  • README.fr.md - Added Flatpak installation instructions
  • README.it.md - Added Flatpak installation instructions
  • README.ja.md - Added Flatpak installation instructions
  • README.ru.md - Added Flatpak installation instructions
  • README.zh-CN.md - Added Flatpak installation instructions
  • src-tauri/src/plugins/driver.rs - Added trigger RPC methods (get_triggers, get_trigger_definition, create_trigger, drop_trigger) with comprehensive tests. Clean, consistent implementation following existing patterns.
  • src/pages/Editor.tsx - Refined tab bar accent color styling with gradient washes, connection-tinted hover states, and accent-colored loading indicators. Null-safe implementation.

Previous review (commit 80c6da7)

Status: No Issues Found | Recommendation: Merge

Files Reviewed (1 file)
  • src/pages/Editor.tsx - Applies a subtle accent-color tint to the editor tab bar based on the active connection. Clean, null-safe implementation using existing utilities (getConnectionAccent, useDrivers).

Reviewed by kimi-k2.7-code-20260612 · Input: 127.9K · Output: 13.6K · Cached: 611.4K

debba added 2 commits June 22, 2026 10:42
Extend the connection-color tab bar so every accent follows the active
connection, falling back to the default blue when none is active:

- Active-tab indicator line uses the connection color with a soft glow
- Active tab carries an accent-tinted body gradient over the content bg
- Inactive tabs pick up an accent wash on hover instead of a flat grey
- Loading bar and rename input border follow the connection color
- Tab bar uses a vertical accent gradient with an accent-tinted bottom
  border so the strip reads as part of the connection
- Scroll arrows and new-tab buttons use theme-safe hover colors
@debba

debba commented Jun 22, 2026

Copy link
Copy Markdown
Collaborator

I really love this feature — tinting the workspace with the active connection's color makes it so much easier to tell environments apart at a glance. I pushed a few additions that carry the accent through the whole tab bar:

  • Active-tab indicator: now uses the connection color with a soft glow instead of the fixed blue.
  • Active tab background: a soft accent gradient over the content background (stronger at the top), so the selected tab feels lit by the connection while still reading as connected to the pane below.
  • Inactive tabs: pick up an accent wash on hover (via a CSS variable) rather than a flat grey.
  • Loading bar & rename input border: follow the connection color too.
  • Tab bar: a vertical accent gradient plus an accent-tinted bottom border, so the whole strip reads as part of the active connection.
  • Theme-safe hovers: scroll arrows and new-tab buttons now use hover:text-primary instead of hover:text-white, which also fixes a contrast issue on light themes.
  • Everything gracefully falls back to the default blue when no connection is active.

What do you think? The accent intensity is just a couple of hex alpha values, so I'm happy to dial it up or down if it feels too strong or too subtle.

@Davydhh

Davydhh commented Jun 22, 2026

Copy link
Copy Markdown
Contributor Author

Thanks so much — I really like all the integrations you added.

I pushed a small follow-up that just tones the accent down a bit — I personally lean toward a slightly less vibrant look:

  • Tab-bar gradient flatter and a touch softer at the top.
  • Active-tab body gradient evened out.
  • Active-tab indicator dimmed — bar with a smaller, softer glow.
  • Bottom border eased.

Let me know what you think

@debba

debba commented Jun 23, 2026

Copy link
Copy Markdown
Collaborator

LGTM. If @NewtTheWolf doesn't have anything to add, I'd go ahead and merge it.

debba added 2 commits June 24, 2026 08:52
Split-pane panel headers and the split-view connection switcher now use
each connection's accent color (getConnectionAccent) instead of a fixed
blue, matching the tinted editor tab bar. Inactive items reuse the same
accent at a dimmer alpha.
@debba debba merged commit b328a97 into TabularisDB:main Jun 24, 2026
1 check passed
@debba

debba commented Jun 24, 2026

Copy link
Copy Markdown
Collaborator

Merged, thanks @Davydhh! Really like this one — the per-connection tint makes it so much easier to tell windows apart at a glance.

If you're up for more, contributions along these lines fit right into what we're trying to do with the visual identity over in #195. Always happy to have them.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feat]: Connection color indicator on the editor tab bar

2 participants